<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023/9/26
  Time: 9:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工信息</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">

</head>
<body>
<div id="app">
    <el-form :inline="true" :model="staffForm" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="staffForm.staffid" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="staffForm.staffname" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="选择分店">
            <el-select v-model="staffForm.branchid" clearable placeholder="主页">
                <el-option v-for="b in branchs" :key="b.branchid" :label="b.branchname" :value="b.branchid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
    </el-form>

    <el-button type="success" @click="add">添加</el-button>


    <%--新增的弹出层--%>
    <el-dialog title="新增员工" :visible.sync="addVisible" width="50%">
        <%--        新增表单--%>
        <el-form ref="addStaffFrom" :model="addStaffFrom" :rules="formRules" label-width="80px">
            <el-form-item label="工号" prop="staffid">
                <el-input v-model="addStaffFrom.staffid"
                          placeholder="请选择员工工号"></el-input>
            </el-form-item>
            <el-form-item label="员工名称" prop="staffname">
                <el-input v-model="addStaffFrom.staffname" placeholder="请选择员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="addStaffFrom.password" placeholder="请选择员工密码"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="addStaffFrom.idcard"
                          placeholder="请选择员工身份证号码"></el-input>
            </el-form-item>
            <el-form-item label="员工住址" prop="address">
                <el-input v-model="addStaffFrom.address" placeholder="请选择员工住址"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input v-model="addStaffFrom.phone"
                          placeholder="联系方式"></el-input>
            </el-form-item>
            <el-form-item label="入职日期">
                <el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="addStaffFrom.entrytime"
                        type="date"
                        placeholder="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="类别">
                <el-select v-model="addStaffFrom.state" placeholder="--类别--">
                    <el-option label="在职" value=1></el-option>
                    <el-option label="离职" value=2></el-option>
                </el-select>
            </el-form-item>
            </el-date-picker>
            <el-form-item label="门店店名">
                <el-select v-model="addStaffFrom.branchid" placeholder="--门店--">
                    <el-option v-for="item in branchs" :key="item.branchid" :label="item.branchname"
                               :value="item.branchid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门名称">
                <el-select v-model="addStaffFrom.deptid" placeholder="--部门--">
                    <el-option v-for="item in deptmentData" :key="item.deptid" :label="item.deptname"
                               :value="item.deptid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="权限">
                <el-select v-model="addStaffFrom.roleid" placeholder="--权限--">
                    <el-option v-for="item in role" :key="item.roleid" :label="item.rolename"
                               :value="item.roleid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="addStaff()">添加</el-button>
                <el-button @click="addVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <el-table
            :data="staffs"
            style="width: 100%"
    >
        <el-table-column
                prop="staffid"
                label="员工工号"
        >
        </el-table-column>
        <el-table-column
                prop="staffname"
                label="员工姓名"
        >
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证号码"
        >
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
        >
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话号码"
        >
        </el-table-column>
        <el-table-column
                prop="entrytime"
                label="入职日期"
        >
        </el-table-column>
        <el-table-column
                prop="branchname"
                label="店名"
        >
        </el-table-column>
        <el-table-column
                prop="role.rolename"
                label="职位名称"
        >
        </el-table-column>
        <el-table-column
                prop="department.deptname"
                label="部门名称"
        >
        </el-table-column>
        <el-table-column
                prop="department.remark"
                label="职位描述"
        >
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态">
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.state==1"
                        effect="dark">
                    工作状态
                </el-tag>
                <el-tag
                        type="info"
                        v-if="scope.row.state==2"
                        effect="dark">
                    冻结状态
                </el-tag>
            </template>

        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="330">
            <template slot-scope="scope">

                <div v-if="scope.row.staffid=='111'" style="text-align: center;color: red">总店长

                </div>
                <div v-else>
                    <el-button
                            size="mini"
                            type=""
                            @click="handleEdit( scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handledd(scope.row)">调动
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">离职
                    </el-button>

                    <el-button
                            size="mini"
                            :type= "scope.row.state === 1 ? 'primary' : 'danger'"
                            @click="handledj(scope.row)">
                        {{ scope.row.state === 1 ? '冻结' : '已冻结' }}
                    </el-button>
                </div>
            </template>
        </el-table-column>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <%--  员工信息编辑弹出层--%>
    <el-dialog
            title="员工信息编辑弹出层"
            :visible.sync="insertVisible"
            width="40%">
        <el-form ref="form" :model="insertForm" label-width="80px">
            <el-form-item label="工号">
                <el-input v-model="insertForm.staffid" readonly></el-input>
            </el-form-item>
            <el-form-item label="员工姓名">
                <el-input v-model="insertForm.staffname" readonly></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="insertForm.password" readonly></el-input>
            </el-form-item>
            <el-form-item label="IDCard">
                <el-input v-model="insertForm.idcard" readonly></el-input>
            </el-form-item>
            <el-form-item label="住址">
                <el-input v-model="insertForm.address"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="insertForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="入职时间">
                <el-input v-model="insertForm.entrytime" readonly></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="insertConfirm">确 定</el-button>
    <el-button @click="insertForm={}">重 置</el-button>

  </span>
    </el-dialog>

    <%--  调动弹出层--%>
    <el-dialog
            title="调动弹出层"
            :visible.sync="insertVisible1"
            width="40%">
        <el-form ref="form" :model="insertForm1" label-width="80px">
            <el-form-item label="工号">
                <el-input v-model="insertForm1.id" readonly></el-input>
            </el-form-item>
            <el-form-item label="员工姓名">
                <el-input v-model="insertForm1.staffname" readonly></el-input>
            </el-form-item>
            <el-form-item label="旧门店">
                <el-input v-model="insertForm1.branchname" readonly></el-input>
            </el-form-item>
            <el-form-item label="旧部门名称">
                <el-input v-model="insertForm1.deptname" readonly></el-input>
            </el-form-item>

            <el-form-item label="新门店">
                <el-select v-model="insertForm1.newbranchid" placeholder="--门店--">
                    <el-option v-for="item in branchs" :key="item.branchid" :label="item.branchname"
                               :value="item.branchid">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="新部门名称">
                <el-select v-model="insertForm1.newdeptid" placeholder="--门店--">
                    <el-option v-for="item in deptmentData" :key="item.deptid" :label="item.deptname"
                               :value="item.deptid">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="insertConfirm1">确 定</el-button>
    <el-button @click="insertForm1={}">重 置</el-button>

  </span>
    </el-dialog>

</div>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //所有员工的信息
            staffs: [],
            //总条数
            total: 0,
            //每页显示的大小
            pageSize: 5,
            //当前页码
            current: 1,
            //表单搜索对象
            staffForm: {},
            //branchs所有门店的列表
            tableRowClassName: 111,
            //员工信息编辑弹出层
            insertForm: {},
            //员工信息编辑弹出层隐藏
            insertVisible: false,

            //添加弹出层隐藏
            addVisible: false,
            //添加弹出层数据
            addStaffFrom: {},
            //下拉框branchs
            branchs: [],
            deptmentData: [],
            role: [],

            insertForm1: {},
            insertVisible1: false,

            //所有的staffid
            allStaffid: [],

            formRules: {
                staffname: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '姓名长度在 2 到 10 个字符之间', trigger: 'blur'}
                ],
                idcard: [
                    {required: true, message: '请输入身份证号码', trigger: 'blur'},
                    {pattern: /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/, message: '身份证号码格式不正确', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '请输入电话号码', trigger: 'blur'},
                    {pattern: /^1[0-9]{10}$/, message: '电话号码格式不正确', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 3, max: 8, message: '密码长度为3到8个字符', trigger: 'blur'},
                    {pattern: /^\d{3,8}$/, message: '密码必须由3到8个数字组成', trigger: 'blur'}
                ]
            }

        },
        created() {
            this.initTable();
            this.initBranch();
            this.initTable1();
        },
        methods: {
            initTable() {
                axios.post("/staff/list?current=" + this.current + "&pageSize=" + this.pageSize, this.staffForm).then(function (res) {
                    app.staffs = res.data.data.list;
                    app.total = res.data.data.total;
                })
                axios.post("/staff/findAllStaffByStaffid").then(function (resp) {
                    console.log(resp)
                    app.allStaffid = resp.data.data;
                })
            },
            //初始化下拉框
            initTable1() {
                axios.post("/staff/select1").then(function (resp) {
                    app.branchs = resp.data.data
                }),
                    axios.post("/staff/select2").then(function (resp) {
                        app.deptmentData = resp.data.data
                    }), axios.post("/staff/select3").then(function (resp) {
                    app.role = resp.data.data
                })
            },

            initBranch() {
                axios.get("/brand/list").then(function (resp) {
                    app.branchs = resp.data.data;

                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.initTable()
            },
            handleCurrentChange(val) {
                this.current = val;
                this.initTable();
            },
            //搜索
            search() {
                this.initTable();
            },
            //添加按钮
            add() {
                this.addVisible = true;
            },
            //添加确认按钮
            addStaff() {
                this.$refs.addStaffFrom.validate((valid) => {
                    if (valid) {
                        // 校验通过，执行提交逻辑
                        console.log('表单校验通过');

                        if (app.addStaffFrom.staffid == null || app.addStaffFrom.address == null || app.addStaffFrom.entrytime == null || app.addStaffFrom.state == null
                            || app.addStaffFrom.branchid == null || app.addStaffFrom.deptid == null || app.addStaffFrom.roleid == null) {
                            app.$message("信息不能为空");
                            return
                        }
                        for (const x of app.allStaffid) {
                            if (x == app.addStaffFrom.staffid) {
                                app.$message("员工编号重复");
                                return;
                            }
                        }
                        axios.post("/staff/add1", this.addStaffFrom).then(function (resp) {
                            app.$message(resp.data.msg);
                            app.addVisible = false;

                        })
                    } else {
                        // 校验不通过
                        console.log('表单校验不通过');
                        return
                    }
                });


            },
            //编辑员工
            handleEdit(row) {
                this.insertVisible = true;
                this.insertForm = row

            },
            //编辑确认按钮
            insertConfirm() {
                axios.post("/staff/update2", this.insertForm).then(function (resp) {
                    app.$message(resp.data.msg);
                })
                app.insertVisible = false;
            },
            offStaff() {

            },
            //调动按钮
            handledd(row) {
                console.log(row)
                //判断是否是店长
                if (row.rolename == "店长") {
                    app.$message("店长不能调动");
                    return
                }
                ;
                axios.post("/staff/selectIf?staffid=" + row.staffid).then(function (resp) {
                    if (resp.data.code == 500) {
                        app.$message("调动中");
                        return;
                    } else {
                        app.$message("可以调动");
                        app.insertVisible1 = true;
                        app.insertForm1 = row

                        // 弹出层
                    }
                })
            },
            //调用确认
            insertConfirm1() {
                if (this.insertForm1.newbranchid == null || this.insertForm1.newdeptid == null) {
                    app.$message('新门店或者新部门不能为空')
                    return;
                }

                axios.post("/staff/add2", this.insertForm1).then(function (resp) {
                    app.$message('调动成功')
                    app.initTable();
                }),
                    this.insertVisible1 = false;

            },
            //冻结
            handledj(row) {
                if (row.state == 1) {
                    axios.post("/staff/dj1?staffid=" + row.staffid).then(function (resp) {
                        app.$message(resp.data.msg)
                        app.initTable();
                    })
                } else if (row.state == 2) {
                    axios.post("/staff/dj2?staffid=" + row.staffid).then(function (resp) {
                        app.$message(resp.data.msg)
                        app.initTable();
                    })
                }


            },
            //离职
            handleDelete(row) {
                this.$confirm('此操作将离职, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/staff/update1?staffid=" + row.staffid).then(function (resp) {
                        app.initTable();
                    })

                    this.$message({
                        type: 'success',
                        message: '离职成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消离职'
                    });
                });
            }
        }
    })
</script>
</html>
